<!-- 输入最大值和最小值的输入框 -->
<template>
  <div class="flex max-min-box">
    <div class="min-input input-box">
      <el-input-number
        v-model="MaxAndMinValue.min"
        :size="size"
        placeholder="最小"
        :precision="precision"
        :controls="controls"
        :class="suffixShow?'suffix-input':''"
        @input="handlerMinInput"
        @blur="handlerBlur"
      ></el-input-number>
      <span v-if="suffixShow" class="input-suf">{{ suffixTxt }}</span>
    </div>

    <span class="line"></span>
    <div class="max-input input-box">
      <el-input-number
        v-model="MaxAndMinValue.max"
        :size="size"
        placeholder="最大"
        :precision="precision"
        :controls="controls"
        :class="suffixShow?'suffix-input':''"
        @input="handlerMaxInput"
        @blur="handlerBlur"
      ></el-input-number>
      <span v-if="suffixShow" class="input-suf">{{ suffixTxt }}</span>
    </div>

  </div>
</template>
<script>
export default {
  name: '', // ·������
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Object,
      default: function() {
        return {
          max: undefined,
          min: undefined
        }
      }
    },
    controls: {
      type: Boolean,
      default: false
    },
    precision: {
      type: Number,
      default: 2
    },
    size: {
      type: String,
      default: 'small'
    },
    suffixShow: {
      type: Boolean,
      default: false
    },
    suffixTxt: {
      type: String,
      default: function() {
        if (this.$store.state.user.unit === 'RMB') {
          return '￥'
        } else {
          return '$'
        }
      }
    }

  },
  data() {
    return {
      MaxAndMinValue: {
        min: undefined,
        max: undefined
      }
    }
  },
  computed: {

  },
  watch: {
    value: { // �����Ķ���
      deep: true, // ���ȼ�������Ϊ true
      immediate: true,
      handler: function(newV, oldV) {
        const obj = JSON.parse(JSON.stringify(newV))
        if (!newV.max && newV.max !== 0) {
          obj.max = undefined
        }
        if (!newV.min && newV.min !== 0) {
          obj.min = undefined
        }
        this.MaxAndMinValue = obj
      }
    }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    handlerMinInput(val) {
      const valObj = JSON.parse(JSON.stringify(this.MaxAndMinValue))
      valObj.min = val
      this.MaxAndMinValue = valObj
      this.$forceUpdate()
      this.$emit('change', valObj)
    },
    handlerMaxInput(val) {
      const valObj = JSON.parse(JSON.stringify(this.MaxAndMinValue))
      valObj.max = val
      this.MaxAndMinValue = valObj
      this.$forceUpdate()
      this.$emit('change', valObj)
    },
    handlerBlur() {
      const valObj = JSON.parse(JSON.stringify(this.value))
      if (valObj.min && valObj.min > valObj.max) {
        const max = valObj.min
        valObj.min = valObj.max
        valObj.max = max
        this.$emit('change', valObj)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .line {
    margin: 0 4px;
    display: inline-block;
    width: 12px;
    height: 1px;
    background: #E0E2E7;
  }

  .max-min-box /deep/ .el-input-number .el-input__inner {
    padding-left: 12px !important;
    text-align: left;
  }

  .input-box {
    max-width: 108px;
    position: relative;
    height: 32px;
    /deep/ .el-input-number {
      max-width: 100%;
    }

    .input-suf {
      display: inline-block;
      position: absolute;
      width: 36px;
      height: 32px;
      right: 0;
      top: 1px;
      color: rgba(51, 64, 74, 0.8);
      text-align: center;
      font-size: 12px;
      border-left: 1px solid #E0E2E7;
    }

  }

  .suffix-input /deep/ .el-input__inner {
    padding-right: 46px !important;
  }
</style>
